<!DOCTYPE html>
<html>
    <head>
        <title>3D Cube</title>
        <meta charset="UTF-8">
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }

            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
            .returnButton{
                width: 100%;
                height: 100%;
                border: 0;
                background-color: transparent;
                background-image: url(images/lastButton.png);
                background-size: 100% 100%;
                outline: none;
                background-repeat: no-repeat;
                cursor: pointer;
                opacity: 1;
            }
            .returnButton:active{
                opacity: 0.7;
            }
        </style>
        <script>
            htconfig = {
                Default: {
                    toolTipDelay: 100,
                    toolTipContinual: true
                }
            };
        </script>
        <script src="./libs/jquery/jquery.min.js"></script>
        <script src="./js/htconfig.js"></script>
        <script src="./libs/core/ht.js"></script>
        <script src="./libs/plugin/ht-obj.js"></script>
        <script type="text/javascript">
            var dm3d;
            var g3d;

            var currentShow = "";
            var f0InitX;
            var f0InitY;
            var f0InitZ;
            var f2InitX;
            var f2InitY;
            var f2InitZ;
            function init() {
                dm3d = new ht.DataModel();
                g3d = new ht.graph3d.Graph3dView(dm3d);
                var g3dDm = g3d.dm();
                //g3d.showDebugTip();
                g3d.addToDOM();
                g3d.deserialize('scenes/3层.json', function (json, dm, gv, datas) {
                    // 业务代码在项目反序列化后实现
                    initDeviceInfo();
                    var dalou = g3dDm.getDataByTag("dalou");
                    var f0Init = dm3d.getDataByTag("floor0");
                    f0InitX = f0Init.getPosition().x;
                    f0InitY = f0Init.getPosition().y;
                    f0InitZ = f0Init.getElevation();
                    var f2Init = dm3d.getDataByTag("floor2");
                    f2InitX = f2Init.getPosition().x;
                    f2InitY = f2Init.getPosition().y;
                    f2InitZ = f2Init.getElevation();
                    g3d.setEye(-1971, 5151, -17221);
                    console.log('眼睛：' + g3d.getEye());
                    console.log('中心：' + g3d.getCenter());
                    rotationTask = {
                        interval: 16,
                        action: function (data) {
                            if (data !== dalou) {
                                return;
                            }
                            dalou.setRotation(dalou.getRotation() + Math.PI / 1000);
                        }
                    };
                    dm3d.addScheduleTask(rotationTask);

                    g3d.mi(function (e) {
                        if (e.kind === 'doubleClickData') {
                            if (e.data !== undefined) {
                                console.log(e.data.getTag() + '----被双击');
                                var f0 = dm3d.getDataByTag("floor0");
                                var f1 = dm3d.getDataByTag("floor1");
                                var f2 = dm3d.getDataByTag("floor2");
                                if (e.data.getTag() === "dalou") {
                                    currentShow = "floor0 floor1 floor2";
                                    document.getElementById("returnButtonDiv").style.display = "block";
                                    g3d.setEye(-13629, 4825, -552);
                                    g3d.setCenter(-665, 331, -997);
                                    e.data.setStyle('3d.visible', false);
                                    f0.setStyle('3d.visible', true);
                                    f1.setStyle('3d.visible', true);
                                    f2.setStyle('3d.visible', true);
                                    var startAnim = 0;
                                    ht.Default.startAnim({
                                        frames: 12, // 动画帧数
                                        interval: 100, // 动画帧间隔毫秒数
                                        easing: function (t) {
                                            return t * t;
                                        }, // 动画缓动函数，默认采用`ht.Default.animEasing`
                                        finishFunc: function () {
                                            console.log('Done!');
                                            startAnim = 0;
                                        }, // 动画结束后调用的函数。
                                        action: function (v, t) { // action函数必须提供，实现动画过程中的属性变化。
                                            if (startAnim === 0) {
                                                f0.p3(// 上移动
                                                        f0InitX,
                                                        f0InitZ - 100,
                                                        f0InitY
                                                        );
                                                f2.p3(// 上移动
                                                        f2InitX,
                                                        f2InitZ + 100,
                                                        f2InitY
                                                        );
                                            } else {
                                                f0.p3(// 上移动
                                                        f0.getPosition().x,
                                                        f0.getElevation() - 100,
                                                        f0.getPosition().y
                                                        );
                                                f2.p3(// 上移动
                                                        f2.getPosition().x,
                                                        f2.getElevation() + 100,
                                                        f2.getPosition().y
                                                        );
                                            }
                                            startAnim = startAnim + 1;
                                        }
                                    });
                                } else {
                                    if (e.data.getTag() === "floor0") {//动画切换
                                        // g3d.setEye(-6068, 9065, 390);
                                        // g3d.setCenter(116, 919, -182);
                                        currentShow = "floor0";
                                        document.getElementById("returnButtonDiv").style.display = "block";
                                        f0.setStyle('3d.visible', true);
                                        f1.setStyle('3d.visible', false);
                                        f2.setStyle('3d.visible', false);
                                        //示例：
                                        g3d.moveCamera([-6068, 9065, 390], [116, 919, -182], {
                                            duration: 3000,
                                            finishFunc: function(){ console.log('Done!1111') }
                                        });
                                    } else if (e.data.getTag() === "floor1_1") {
                                        // g3d.setEye(-6068, 9065, 390);
                                        // g3d.setCenter(116, 919, -182);
                                        currentShow = "floor1";
                                        document.getElementById("returnButtonDiv").style.display = "block";
                                        f0.setStyle('3d.visible', false);
                                        f1.setStyle('3d.visible', true);
                                        f2.setStyle('3d.visible', false);
                                        g3d.moveCamera([-6068, 9065, 390], [116, 919, -182], {
                                            duration: 3000,
                                            finishFunc: function(){ console.log('Done!1111') }
                                        });

                                    } else if (e.data.getTag() === "floor2_1") {
                                        // g3d.setEye(-6068, 9065, 390);
                                        // g3d.setCenter(116, 919, -182);
                                        currentShow = "floor2";
                                        document.getElementById("returnButtonDiv").style.display = "block";
                                        f0.setStyle('3d.visible', false);
                                        f1.setStyle('3d.visible', false);
                                        f2.setStyle('3d.visible', true);
                                        g3d.moveCamera([-6068, 9065, 390], [116, 919, -182], {
                                            duration: 3000,
                                            finishFunc: function(){ console.log('Done!1111') }
                                        });
                                    } else if (e.data.getTag() === "f1_3") {
                                        console.log(e.data.getTag() + '----被双击11111');
                                        g3d.setEye(1232, 3415, -527);
                                        g3d.setCenter(1668, 2562, -524);
                                    } else if (e.data.getTag() === "kf_3") {
                                        g3d.setEye(890, 3251, 2590);
                                        g3d.setCenter(1326, 2398, 2593);
                                    } else if (e.data.getTag() === "kf_4") {
                                        g3d.setEye(811, 3578, 3768);
                                        g3d.setCenter(1329, 2404, 3771);
                                    } else if (e.data.getTag() === "kf_5") {
                                        g3d.setEye(1079, 3357, 5303);
                                        g3d.setCenter(1515, 2504, 5306);
                                    }else if (e.data.getTag() === "kf_1") {
                                        g3d.setEye(1042.8085854290804,2307.3254904738546,2893.706650981409);
                                        g3d.setCenter(1386.0858626600136,1277.8793052664842,2896.396391860781);
                                    }
                                    else if (e.data.getTag() === "kf_2") {
                                        g3d.setEye(1061, 2318, 4794);
                                        g3d.setCenter(1404, 1289, 4797);
                                    }
                                }
                            }
                        } else if (e.kind === 'onDoubleClick')
                        {
                            console.log(e.data.getTag() + '----图元双击');
                        }
                    });

                });
                g3d.addInteractorListener(function (e) {
                    if (e.kind === 'clickData') {
                        console.log(e.data + '----被单击');
                    } else if (e.kind === 'doubleClickData') {
                        //console.log(e.data.getTag() + '----被双击A');
                    } else if (e.kind === 'clickBackground') {
                        console.log('单击背景--' + g3d.getEye());
                        console.log('单击背景--' + g3d.getCenter());

                    } else if (e.kind === 'doubleClickBackground') {
                        console.log('双击背景');
                    } else if (e.kind === 'beginRectSelect') {
                        console.log('开始框选图元');
                    } else if (e.kind === 'betweenRectSelect') {
                        console.log('正在框选图元');
                    } else if (e.kind === 'endRectSelect') {
                        console.log('结束框选图元');
                    } else if (e.kind === 'beginMove') {
                        console.log('开始移动图元');
                    } else if (e.kind === 'betweenMove') {
                        console.log('正在移动图元');
                    } else if (e.kind === 'endMove') {
                        console.log('结束移动图元');
                    } else if (e.kind === 'beginPan') {
                        console.log('开始手抓图平移');
                    } else if (e.kind === 'betweenPan') {
                        console.log('正在手抓图平移');
                    } else if (e.kind === 'endPan') {
                        console.log('结束手抓图平移');
                    } else if (e.kind === 'beginEditRect') {
                        console.log('开始编辑图元大小和位置');
                    } else if (e.kind === 'betweenEditRect') {
                        console.log('正在编辑图元大小和位置');
                    } else if (e.kind === 'endEditRect') {
                        console.log('结束编辑图元大小和位置');
                    } else if (e.kind === 'beginEditPoint') {
                        console.log('开始编辑多边形Shape或多点Edge的具体点');
                    } else if (e.kind === 'betweenEditPoint') {
                        console.log('正在编辑多边形Shape或多点Edge的具体点');
                    } else if (e.kind === 'endEditPoint') {
                        console.log('结束编辑多边形Shape或多点Edge的具体点');
                    } else if (e.kind === 'beginEditRotation') {
                        console.log('开始旋转图元');
                    } else if (e.kind === 'betweenEditRotation') {
                        console.log('正在旋转图元');
                    } else if (e.kind === 'endEditRotation') {
                        console.log('结束旋转图元');
                    } else if (e.kind === 'moveLeft') {
                        console.log('左方向键左移图元一个像素');
                    } else if (e.kind === 'moveRight') {
                        console.log('右方向键右移图元一个像素');
                    } else if (e.kind === 'moveUp') {
                        console.log('上方向键上移图元一个像素');
                    } else if (e.kind === 'moveDown') {
                        console.log('下方向键下移图元一个像素');
                    } else if (e.kind === 'toggleNote') {
                        console.log('切换note标注的展开合并');
                    } else if (e.kind === 'toggleNote2') {
                        console.log('切换note2标注的展开合并');
                    } else if (e.kind === 'beginEditPoints') {
                        console.log('开始进入曲线的点编辑状态');
                    } else if (e.kind === 'endEditPoints') {
                        console.log('结束曲线的点编辑状态');
                    } else if (e.kind === 'hover') {
                        console.log('鼠标停留');
                    } else if (e.kind === 'onClick') {
                        console.log('单击图元');
                    } else if (e.kind === 'onDoubleClick') {
                        console.log('双击图元');
                    } else if (e.kind === 'onContextMenu') {
                        console.log('右击图元');
                    } else if (e.kind === 'onDown') {
                        console.log('在图元处按下');
                    } else if (e.kind === 'onUp') {
                        console.log('在图元处放开');
                    } else if (e.kind === 'onMove') {
                        console.log('鼠标在图元上移动');
                    } else if (e.kind === 'onEnter') {
                        console.log('鼠标进入图元');
                    } else if (e.kind === 'onHover') {
                        console.log('鼠标在图元上悬停');
                    } else if (e.kind === 'onLeave') {
                        console.log('鼠标离开图元');
                    } else if (e.kind === 'onBeginDrag') {
                        console.log('图元开始拖拽');
                    } else if (e.kind === 'onDrag') {
                        console.log('图元拖拽');
                    } else if (e.kind === 'onEndDrag') {
                        console.log('图元结束拖拽');
                    } else if (e.kind === 'onScroll') {
                        console.log('鼠标图元上滚动');
                    }
                });
            }

            function returnBack() {
                var f0 = dm3d.getDataByTag("floor0");
                var f1 = dm3d.getDataByTag("floor1");
                var f2 = dm3d.getDataByTag("floor2");
                var dalou = dm3d.getDataByTag("dalou");
                if (currentShow === "floor0" || currentShow === "floor1" || currentShow === "floor2") {
                    g3d.setEye(-13629, 4825, -552);
                    g3d.setCenter(-665, 331, -997);
                    f0.setStyle('3d.visible', true);
                    f1.setStyle('3d.visible', true);
                    f2.setStyle('3d.visible', true);
                    dalou.setStyle('3d.visible', false);
                    currentShow = "floor0 floor1 floor2";
                } else if (currentShow === "floor0 floor1 floor2") {
                    g3d.setEye(-1971, 5151, -17221);
                    g3d.setCenter(-1165.2016, -1528.77743, 82.39783);
                    f0.setStyle('3d.visible', false);
                    f1.setStyle('3d.visible', false);
                    f2.setStyle('3d.visible', false);
                    dalou.setStyle('3d.visible', true);
                    document.getElementById("returnButtonDiv").style.display = "none";
                }
            }
            function showWarn(v) {
                var f0 = dm3d.getDataByTag("camera_2_1");
                var f1 = dm3d.getDataById(6);
                console.info(f0);
                console.info(f1);
                console.info(dm3d.getDatas());
            }
        </script>
        <script src="./js/video.js" type="text/javascript"></script>
    </head>
    <body onload="init();">
        <div id="returnButtonDiv"  style="position: absolute;display: none;z-index: 9;;top:45%;left:10%;width:calc(50% - 22.5px);height: calc(50% - 44px);width:55px;height: 88px; ">
            <input onclick="returnBack()" type="button" class="returnButton" value="" />
        </div>
    </body>
</html>